<template>
  <div class="w">
    <div class="bgcImg"></div>
    <div style="background-color: #fff;">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane name="1">
          <template #label>
            <span class="custom-tabs-label">
              <img class="ysImg" v-if="activeName == '1'" src="@/assets/img/mypoints/bx_l.png" alt="">
              <img class="ysImg" v-else src="@/assets/img/mypoints/bx_h.png" alt="">
              <span>标讯</span>
            </span>
          </template>
          <Biaoxun ref="biaoxunCz" />
        </el-tab-pane>
        <el-tab-pane name="2">

          <template #label>
            <span class="custom-tabs-label">
              <img class="ysImg" v-if="activeName == '2'" src="@/assets/img/mypoints/gys_l.png" alt="">
              <img class="ysImg" v-else src="@/assets/img/mypoints/gys_h.png" alt="">
              <span>供应商</span>
            </span>
          </template>
          <Gongyingshang ref="gysCz" />
        </el-tab-pane>
        <el-tab-pane name="3">

          <template #label>
            <span class="custom-tabs-label">
              <img class="ysImg" v-if="activeName == '3'" src="@/assets/img/mypoints/cgs_l.png" alt="">
              <img class="ysImg" v-else src="@/assets/img/mypoints/cgs_h.png" alt="">
              <span>采购商</span>
            </span>
          </template>
          <Caigoushang ref="cgsCz" />
        </el-tab-pane>
        <el-tab-pane name="4">

          <template #label>
            <span class="custom-tabs-label">
              <img class="ysImg" v-if="activeName == '4'" src="@/assets/img/mypoints/lxr_l.png" alt="">
              <img class="ysImg" v-else src="@/assets/img/mypoints/lxr_h.png" alt="">
              <span>联系人</span>
            </span>
          </template>
          <Lianxiren ref="lxCz" />
        </el-tab-pane>
        <el-tab-pane name="5">

          <template #label>
            <span class="custom-tabs-label">
              <img class="ysImg" v-if="activeName == '5'" src="@/assets/img/mypoints/ds_l.png" alt="">
              <img class="ysImg" v-else src="@/assets/img/mypoints/ds_h.png" alt="">
              <span>竞争对手</span>
            </span>
          </template>
          <Rivalry ref="dsCz" />
        </el-tab-pane>
      </el-tabs>
      <div class="Daobuttom">
        <div></div>
        <div>
          <span class="reprovision" @click="repclick">重置</span>
          <span class="consult" @click="conclick">查询</span>
        </div>
      </div>
    </div>
  </div>
  <!-- <Fotter/> -->
</template>

<script setup>
import Biaoxun from './conster/biaoxun/index.vue'
import Gongyingshang from './conster/gongyingshang/index.vue'
import Caigoushang from './conster/caigoushang/index.vue'
import Lianxiren from './conster/lianxiren/index.vue'
import Rivalry from './conster/rivalry/index.vue'

import Fotter from "@/components/fotter/index.vue";
import { useRadio1Store } from "@/pain/search/search";
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus'
const router = useRouter();
const signalsRadio1 = useRadio1Store();

const activeName = ref('1')
const handleClick = (tab) => {
  window.localStorage.setItem("ditu", JSON.stringify(''));
  console.log(tab.props.name)
}
const biaoxunCz = ref()
const gysCz = ref()
const cgsCz = ref()
const dsCz = ref()
const lxCz = ref()
const repclick = () => {
  if (activeName.value == '1') {
    biaoxunCz.value.dataBiaoxuns()
  } else if (activeName.value == '2') {
    gysCz.value.dataGys()
  } else if (activeName.value == '3') {
    cgsCz.value.dataCgs()
  } else if (activeName.value == '4') {
    lxCz.value.dataLxr()
  } else if (activeName.value == '5') {
    dsCz.value.dataDs()
  }
}
const conclick = () => {
  if (activeName.value == '1') {
    window.localStorage.setItem("daochu", JSON.stringify(biaoxunCz.value.dataService));
    // signalsRadio1.T_getsearchs()
    console.log(signalsRadio1.T_tender)
  } else if (activeName.value == '2') {
    window.localStorage.setItem("daochu", JSON.stringify(gysCz.value.dataService));
    // signalsRadio1.T_getsuppliers()
  } else if (activeName.value == '3') {
    window.localStorage.setItem("daochu", JSON.stringify(cgsCz.value.dataService));
    // signalsRadio1.T_getbuyers()
  } else if (activeName.value == '4') {
    window.localStorage.setItem("daochu", JSON.stringify(lxCz.value.dataService));
    // signalsRadio1.getcontact()
  } else if (activeName.value == '5') {
    if (signalsRadio1.T_ds.input1 == '') {
      ElMessage({
        message: '公司名称不为空',
        type: 'warning',
      })
      return
    } else {
      window.localStorage.setItem("daochu", JSON.stringify(dsCz.value.dataService));
    }
  }
  const href = router.resolve({
    path: "/details",
    query: {
      id: activeName.value,
    }
  });
  window.open(href.href, "_blank");
}
</script>

<style lang="scss" scoped>
.w {
  width: 1200px;
  margin: 0 auto;
}



.bgcImg {
  width: 100%;
  height: 200px;
  background-image: url("../../assets/img/daochu.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin-bottom: 10px;
}


.Daobuttom {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1200px;
  height: 64px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 11px 0 rgba(19, 84, 86, .14);
  z-index: 10;

  .reprovision {
    display: inline-block;
    width: 72px;
    height: 40px;
    margin-right: 15px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #74798c;
    cursor: pointer;
  }

  .consult {
    display: inline-block;
    width: 72px;
    height: 40px;
    background-color: #6675FF;
    border: 1px solid #e8e8e8;
    margin-right: 15px;
    border-radius: 4px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
  }
}

.custom-tabs-label {
  display: flex;
  justify-content: center;
  align-items: center;

  .ysImg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
}

::v-deep .el-tabs__nav-scroll {
  padding: 10px 0 0 20px;
}

::v-deep .el-tabs__item.is-active {
  color: #6675FF;
}

::v-deep .el-tabs__item {
  color: #A9B1BE;
}

::v-deep .el-tabs__active-bar {
  background-color: #6675FF;
}
</style>
